<template>
    <div class="view_logs">
        <card title="日志管理">
            <template #actions>
                <el-select class="w-28" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySomething" :label="val" :value="key" :key="key" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>

            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" align="center"></el-table-column>
                    <el-table-column prop="id" label="id"></el-table-column>
                    <el-table-column prop="userName" label="username"></el-table-column>
                    <el-table-column prop="operation" label="operation"></el-table-column>
                    <el-table-column prop="method" label="method"></el-table-column>
                    <el-table-column prop="params" label="params"></el-table-column>
                    <el-table-column prop="execTime" label="execTime"></el-table-column>
                    <el-table-column prop="ipAddr" label="ipAddr"></el-table-column>
                    <el-table-column prop="createTime" label="createTime"></el-table-column>
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';

export default {
    data() {
        return {
            tableData: [],

            queryBy: 'params',
        };
    },

    computed: {
        queryBySomething() {
            return {
                params: 'params',
                username: 'username',
                operation: 'operation',
            };
        },

        placeholder() {
            return `按${this.queryBySomething[this.queryBy]}查询`;
        },
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/log/findPageLog',
            paginable: true,
            params: {
                queryString: 'queryBy',
            },
        }),
    ],
};
</script>